<template>
  <view>
    <view class="shop-list env_bar">
      <view
        class="shop-item"
        v-if="pageList && pageList.length > 0"
        v-for="(item, index) in pageList"
        @click="shopInfoClick(index)"
      >
        <img
          :src="item.goods_info.compound_img"
          style="
            width: 186rpx;
            height: 186rpx;
            border-radius: 8rpx;
            flex-shrink: 0;
            display: block;
            margin-right: 25rpx;
          "
          alt=""
        />
        <view class="shop-item-textBox">
          <view class="shop-item-t1">{{ item.goods_info.goods_name }}</view>
          <view class="shop-item-t2">已消耗{{ item.num }}个普通款</view>
          <view class="shop-item-btn">
            <view
              class="shop-item-t3"
              style="
                font-family: OPPOSans;
                font-weight: 500;
                color: #9b9b9b;
                font-size: 24rpx;
              "
              >点击查看></view
            >
            <view
              style="
                font-family: OPPOSans;
                font-weight: 500;
                font-size: 24rpx;
                color: #9b9b9b;
              "
              >{{ item.add_time }}</view
            >
          </view>
        </view>
      </view>
      <view
        v-if="pageList.length <= 0"
        class=""
        style="
          font-family: OPPOSans;
          font-weight: 500;
          font-size: 30rpx;
          color: #cacaca;
          text-align: center;
          margin: 20vh auto 0;
        "
      >
        <image
          src="https://ojqn.wm2177.com/wechat_imgs/store-null.png"
          alt=""
          style="
            width: 214rpx;
            height: 214rpx;
            display: block;
            margin: 0 auto 27rpx;
          "
        />
        <view
          class=""
          style="margin-top: 22rpx; font-size: 26rpx; color: #cacaca"
        >
          暂无记录
        </view>
      </view>
    </view>
    <!-- <u-popup v-model="isShowAllShop" mode="bottom"> -->
    <uni-popup ref="listpopup" type="bottom" v-if="pageList.length > 0">
      <view class="env_bar" style="background: #fff; height: 66vh">
        <view class="pr pop_shop_title">
          使用明细
          <view class="pop_shop_title_c" @click="offisShowAllShop">X</view>
        </view>
        <scroll-view scroll-y="true" style="height: 93%">
          <view
            class="pop-main"
            v-for="(item, index) in pageList[pageListIndex].material_info"
          >
            <img
              :src="item.img"
              alt=""
              style="
                width: 103rpx;
                height: 103rpx;
                display: block;
                flex-shrink: 0;
                border-radius: 8rpx;
              "
            />
            <view class="" style="margin-left: 24rpx">
              <view class="t1">{{ item.goods_name }}</view>
              <view class="t2">数量:{{ item.num }}</view>
            </view>
          </view>
        </scroll-view>
      </view>
    </uni-popup>
    <!-- </u-popup> -->
  </view>
</template>

<script>
  import { http } from '@/utils/http.js'
  import { parseTime } from '@/utils/index.js'

  export default {
    data() {
      return {
        pageList: [],
        isShowAllShop: false,
        pageListIndex: 0,
      }
    },
    methods: {
      async getPageList() {
        let res = await http.request({
          url: '/api/compound/compoundLog',
          method: 'POST',
          data: {
            page: 1,
            limit: 100,
          },
        })
        res.data.forEach((item) => {
          item.add_time = parseTime(item.add_time)
        })
        if (res.st == 1) {
          this.pageList = res.data
        }
      },
      offisShowAllShop() {
        this.isShowAllShop = false
        this.$refs.listpopup.close('bottom')
      },
      shopInfoClick(e) {
        this.pageListIndex = e
        this.isShowAllShop = !this.isShowAllShop
        if (this.isShowAllShop) {
          this.$refs.listpopup.open('bottom')
        } else {
          this.$refs.listpopup.close('bottom')
        }
      },
    },
    mounted() {
      this.getPageList()
    },
  }
</script>

<style>
  page {
    background-color: #fff;
  }

  .shop-list {
    margin: 0 31rpx;
  }

  .shop-item {
    display: flex;
    justify-content: space-between;
    margin-top: 42rpx;
    padding-bottom: 42rpx;
    border-bottom: 2rpx solid rgba(255, 255, 255, 0.1);
  }
  .shop-item:last-child {
    border: none;
  }
  .shop-item-textBox {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 194rpx;
  }
  .shop-item-t1 {
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 28rpx;
    color: #1a1a1a;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;

    width: 476rpx;
    line-height: 32rpx;
    height: 64rpx;
    /* margin-bottom: 32rpx; */

    flex-shrink: 0;
  }
  .shop-item-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .shop-item-t2 {
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 24rpx;
    color: #7863ff;
    flex-shrink: 0;
  }
  .pop_shop_title {
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 38rpx;
    color: #1a1a1a;
    line-height: 39rpx;
    background-color: #fff;
    /* background: linear-gradient(0deg, #3D3D3D 0%, #3D3D3D 46.484375%, #3D3D3D 100%); */
    /* -webkit-background-clip: text;
		-webkit-text-fill-color: transparent; */
    text-align: center;
    padding-top: 32rpx;
    padding-bottom: 58rpx;
  }
  .pop_shop_title_c {
    position: absolute;
    top: 42rpx;
    right: 29rpx;
    line-height: 39rpx;
    font-size: 41rpx;
    color: #1a1a1a;
    background-color: #1a1a1a;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .pop-main {
    display: flex;
    margin: 20rpx 0;
    margin-left: 20rpx;
  }
  .pop-main .t1 {
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 24rpx;
    color: #1a1a1a;
    line-height: 24rpx;
    width: 492rpx;
    margin-bottom: 44rpx;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .pop-main .t2 {
    font-family: OPPOSans;
    font-weight: 500;
    font-size: 24rpx;
    color: #7863ff;
  }

  .env_bar {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>
